<template>
  <div>
    <div style="border-bottom: 1px solid #ebeef5; margin: 2px;">
      <el-button-group>
        <el-tooltip :open-delay="500" content="新建根目录" placement="top">
          <el-button icon="el-icon-folder-add" size="mini" type="primary" @click="addCatalog(null, 0)" />
        </el-tooltip>
        <el-tooltip :content="`新建${eTitle}`" :open-delay="500" placement="top">
          <el-button icon="el-icon-document-add" size="mini" type="primary" @click="addElement(null, 0)" />
        </el-tooltip>
        <el-tooltip :open-delay="500" content="搜索" placement="top">
          <el-button size="mini" type="primary" @click="handleClickSearch"><svg-icon icon-class="search" /></el-button>
        </el-tooltip>
      </el-button-group>
    </div>
    <splitpanes style="height: 87vh">
      <pane :min-size="10" :size="30">
        <div style="width: 100%; height: 100%;">
          <div id="leftDiv" style="overflow-y: scroll; height: 100%;">
            <tree-component
              ref="treeComponent"
              :element-label="eTitle"
              catalog-label="目录"
              draggable
              lazy
              @tree-content="treeContent"
              @tree-sort="treeSort"
              @choose-catalog="chooseCatalog"
              @reload-catalog="reloadCatalog"
              @copy-catalog="copyCatalog"
              @add-catalog="addCatalog"
              @delete-catalog="deleteCatalog"
              @choose-element="chooseElement"
              @add-element="addElement"
              @copy-element="copyElement"
              @delete-element="deleteElement"
            />
          </div>
        </div>
      </pane>
      <pane :min-size="20" :size="70">
        <div id="rightDiv" style="overflow-y: scroll; width: 100%; height: 98%;">
          <el-tabs v-if="activeName" v-model="activeName" style="width: 100%;" type="border-card">
            <el-tab-pane v-if="activeName === 'catalog'" label="目录" name="catalog">
              <catalog-component
                ref="catalogComponent"
                :catalog-info="catalog"
                :type="eType"
                @create="createCatalog"
                @update="updateCatalog"
              />
            </el-tab-pane>
            <el-tab-pane v-if="activeName === 'element'" :label="eTitle" name="element">
              <web-socket-component
                ref="webSocketComponent"
                @create="createElement"
                @update="updateElement"
              />
            </el-tab-pane>
          </el-tabs>
        </div>
      </pane>
    </splitpanes>

    <el-dialog :visible.sync="searchDialogFormVisible" title="搜索" width="1200px" :close-on-click-modal="false">
      <interface-search-component
        ref="interfaceSearchComponent"
        :type="eType"
        @dblclickResultRow="dblclickResultRow"
      />
    </el-dialog>
  </div>
</template>

<style>
.splitpanes__pane {
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  border: 1px solid #ebeef5;
}
.splitpanes__splitter {
  width: 5px;
  margin-left: -1px
}
#leftDiv::-webkit-scrollbar, #rightDiv::-webkit-scrollbar {
  width: 0px;
}
</style>

<script>
import { Pane, Splitpanes } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
import TreeComponent from '@/components/functional_test/Tree/index.vue'
import CatalogComponent from '@/components/functional_test/Catalog/index.vue'
import WebSocketComponent from '@/components/functional_test/WebSocket/index'
import InterfaceSearchComponent from '@/components/functional_test/Search/interfaceSearch.vue'
import { copy as catalogCopy, del as catalogDel, listTreeContent, treeSort } from '@/api/functional_test/catalog'
import { del as apiDel } from '@/api/functional_test/test_data_manage/api'

export default {
  components: { Splitpanes, Pane, TreeComponent, CatalogComponent, WebSocketComponent, InterfaceSearchComponent },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      searchDialogFormVisible: false,
      httpVModelValue: {
        catalogId: 0,
        textMode: false
      },
      eType: 12, // 元素类型
      activeName: null, // 当前激活的 tab 名称
      eTitle: ' WebSocket 接口',
      catalog: {}, // catalog 对象
      element: {} // element 对象
    }
  },
  created() {
  },
  methods: {
    // tree：装载当前树节点数据
    treeContent(parentId, resolve) {
      listTreeContent({
        projectId: this.$store.getters.projectId,
        type: this.eType,
        parentId: parentId
      }).then(response => {
        resolve(response.data)
      })
    },
    // tree：拖拽排序
    treeSort(draggingNode, dropNode, dropType) {
      treeSort(this.$store.getters.projectId, this.eType, draggingNode.data, dropNode.data, dropType).then(response => {
        this.$message({ message: '修改排序成功!', type: 'success' })
      })
    },
    // tree：点击一个分类后调用此方法
    chooseCatalog(id) {
      this.activeName = 'catalog' // 设置当前 tab catalog
      this.currentCatalogId = this.catalog.id
      this.$nextTick(() => {
        this.$refs.catalogComponent.loadData(id)
      })
    },
    // tree：点击刷新一个分类的按钮后回调此方法
    reloadCatalog() {
      this.activeName = null // 清除 tab activeName
    },
    // tree：点击复制一个分类后调此方法
    copyCatalog(id, resolve) {
      catalogCopy(this.eType, this.$store.getters.projectId, id).then(response => {
        resolve(response.data)
      })
    },
    // tree：点击添加一个分类后调此方法
    addCatalog(parent_id) {
      this.activeName = 'catalog' // 设置当前 tab catalog
      this.$nextTick(() => {
        this.$refs.catalogComponent.add(parent_id)
      })
    },
    // tree：点击复制一个元素后调此方法
    copyElement(parent_id, id) {
      this.currentCatalogId = parent_id
      this.activeName = 'element' // 设置当前 tab element
      // this.testCaseComponentKey = this.testCaseComponentKey + 1 // 增加测试用例组件 key，强制刷新组件数据
      this.$nextTick(() => {
        this.$refs.webSocketComponent.copy(id)
      })
    },
    // tree：http接口定义添加成功后回调此方法
    createElement(elementInfo) {
      this.$refs.treeComponent.appendNode(elementInfo.id, elementInfo.catalogId, elementInfo.name, false, null, null)
    },
    // tree：http接口定义修改成功后回调此方法
    updateElement(elementInfo) {
      this.$refs.treeComponent.updateNode(elementInfo)
    },
    // tree：分类添加成功后回调此方法
    createCatalog(catalogInfo) {
      this.catalog = catalogInfo
      this.$refs.treeComponent.appendNode(catalogInfo.id, catalogInfo.parentId, catalogInfo.name, true, null, null)
    },
    // tree：分类修改成功后回调此方法
    updateCatalog(catalogInfo) {
      this.catalog = catalogInfo
      this.$refs.treeComponent.updateNode(catalogInfo)
    },
    // tree：删除一个分类
    deleteCatalog(id, resolve) {
      catalogDel(this.$store.getters.projectId, this.eType, id).then(response => {
        resolve()
        this.activeName = null // 清除 tab activeName
      })
    },
    // tree：点击一个元素后调用此方法
    chooseElement(id) {
      this.activeName = 'element' // 设置当前 tab element
      this.$nextTick(() => {
        this.$refs.webSocketComponent.loadData(id)
      })
    },
    // tree：点击添加一个元素后调此方法
    addElement(parent_id) {
      this.currentCatalogId = parent_id
      this.activeName = 'element' // 设置当前 tab element
      this.$nextTick(() => {
        this.$refs.webSocketComponent.add(parent_id)
      })
    },
    // tree：删除一个元素
    deleteElement(id, resolve) {
      apiDel(this.eType, id).then(response => { // 这里要改成 delElement
        resolve()
      })
    },
    // 单击搜索按钮
    handleClickSearch() {
      this.searchDialogFormVisible = true
    },
    // 双击搜索结果行
    dblclickResultRow(elementParent) {
      this.searchDialogFormVisible = false
      this.$refs.treeComponent.setCurrentNode(elementParent)
    }
  }
}
</script>
